<template>
  <div class="all">
    <header>
      <div class="header_left" @click="back()">
        <img src="../../../assets/返回.png" alt="">
        <span class="side" >返回</span>
      </div>
      <div class="header_content">
        <span>签字确认</span>
      </div>
      <div class="header_right">
        <span class="side" @click="handleReset">清空</span>
      </div>
    </header>
    <div class="contentWrite">
      <vue-esign ref="esign"
                 :width="800" :height="2000"
                 style="background: #1da4f2"
                 :isCrop="isCrop"
                 :lineWidth="lineWidth"
                 :lineColor="lineColor"
                 :bgColor.sync="bgColor" />
    </div>
    <div class="bottom">
      <button  @click="handleGenerate">确认</button>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'InsuranceWrite',
  data () {
    return {
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '',
      resultImg: '',
      isCrop: false,
      height: 0
    }
  },
  mounted () {
    this.height = $(window).height() - $('.bottom').height() - $('header').height()
    $('.contentWrite').css('height', $(window).height() - $('.bottom').height() - $('header').height() - 20 + 'px')
  },
  methods: {
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 清空画布
    handleReset () {
      this.$refs.esign.reset()
    },
    // 生成图片
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        this.resultImg = res
        this.$http.insuranceFileUpload({base64: this.resultImg})
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              if (this.$route.name === 'insure_sign_url') {
                sessionStorage.setItem('insure_sign_url', res.data.sign_url)
              } else if (this.$route.name === 'assured_sign_url') {
                sessionStorage.setItem('assured_sign_url', res.data.sign_url)
              } else if (this.$route.name === 'assign_sign_url') {
                sessionStorage.setItem('assign_sign_url', res.data.sign_url)
              }
              this.$router.history.go(-1)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }).catch(err => {
        console.log(err)
        Toast('请签字确认') // 画布没有签字时会执行这里 'Not Signned'
      })
    },
    send () {
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100vh;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    background: #FFFFFF;
    position: sticky;
    top: 0;
  }
  header div{
    /*width: 33%;*/
    display: flex;
    align-items: center;
  }
  .header_left{
    width: 20%;
  }
  .header_right{
    width: 20%;
    justify-content: flex-end;
  }
  .header_right span{
    margin-right: 15px;
  }
  .header_content{
    width: 60%;
    justify-content: center;
  }
  header img{
    width: 7px;
    height: 13px;
    margin-left: 15px;
    margin-right: 5px;
  }
  .side{
    color: #1da4f2;
  }
  .contentWrite{
    width: 95%;
    /*height: 80vh;*/
    background: #FFFFFF;
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
  }
  .bottom{
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
  }
  .bottom button{
    width: 92%;
    height: 44px;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    border-radius: 22px;
    border: none;
    color: #FFFFFF;
  }
</style>
